<script setup lang="ts">
// 全局组件  是需要有类型的

// 分析组件：
// 1.选择的选项是不一定的  可能是男女   就诊过未就诊过    一周一个月半年
//    ==》 传入options
// 2.默认选中    默认选中谁不一定   父组件传入
// 3.子组件回传数据给父组件更新
// 4.双向绑定

defineProps<{
  options: {
    label: string
    // 后端可能需要的value是string  类型扩展
    value: number|string
  }[]
  modelValue?: number|string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: number|string): void
}>()
</script>

<template>
  <div class="cp-radio-btn">
    <a
      v-for="item in options"
      :key="item.value"
      class="item"
      :class="{ active: item.value === modelValue }"
      href="#"
      @click.prevent="emit('update:modelValue', item.value)"
    >
      {{ item.label }}
    </a>
  </div>
</template>

<style lang="scss" scoped>
.cp-radio-btn {
  display: flex;
  flex-wrap: wrap;
  .item {
    height: 32px;
    min-width: 60px;
    line-height: 30px;
    padding: 0 14px;
    text-align: center;
    border: 1px solid var(--cp-bg);
    // background-color: var(--cp-bg);
    background-color: #8df;
    margin-right: 10px;
    box-sizing: border-box;
    color: var(--cp-text2);
    margin-bottom: 10px;
    border-radius: 4px;
    transition: all 0.3s;
    &.active {
      border-color: var(--cp-primary);
      background-color: var(--cp-plain);
    }
  }
}
</style>
